<template>
    <div class="draw_board">
        <canvas ref="drawCanvas" width="375px" height="320px"></canvas>
        <div class="op"> 
          <ColorPicker v-show="colorPickeVisible" class="color_picker" @choose-color="setPenColor"/>
          <WidthPicker v-show="widthPickeVisible" class="width_picker" :color="strokeStyle" @choose-width="setPenWidth"/>
          <div class="op_item">
            <div class="item" @click="colorPickeVisible=true;widthPickeVisible=false;">
              <div class="color_control" :style="'background-color:'+strokeStyle"></div> 
            </div>
          </div>
          <div class="op_item" >
            <div class="item" @click="widthPickeVisible=true;colorPickeVisible=false;"  >
              <div class="linewidth_control" :style="'background-color:'+strokeStyle+';width:'+lineWidth+'px;height:'+lineWidth+'px;margin-top:-'+lineWidth/2+'px'"></div> 
            </div>
          </div>
          <div class="op_item">
            <div class="item" @click="undo">              
              <i @click="undo" :disabled="!canUndo" class="iconfont">&#xe822;</i>
            </div>            
          </div>
          <div class="op_item">
            <div class="item" @click="undo">              
              <i @click="undo" :disabled="!canUndo" class="iconfont">&#xe7cf;</i>
            </div>            
          </div>
          <div class="op_item">
            <div class="item" @click="undo">              
              <i @click="undo" :disabled="!canUndo" class="iconfont">&#xe63c;</i>
            </div>            
          </div>
          <div class="op_item"></div>
        </div>
    </div>
</template>

<script>
import Stack from "@/util/stack.js";
import ColorPicker from "./ColorPicker.vue";
import WidthPicker from "./WidthPicker.vue";
let ctx;
let imgStack = new Stack();
let strokeData={}
export default {
  data() {
    return {
      penStroke: 1,
      strokeStyle: "#555",
      lineWidth: 2,
      drawing: false,
      posArray: [],
      canUndo: false,
      colorPickeVisible: false,
      widthPickeVisible: false
    };
  },
  methods: {
    setPenColor(color) {
      this.strokeStyle = color;
      this.colorPickeVisible = false;
      //ctx.strokeStyle =color;
    },
    setPenWidth(width) {
      this.lineWidth = width;
      this.widthPickeVisible = false;
    },
    drawBegin(e) {
      strokeData={
        color:this.strokeStyle,
        lineWidth:this.lineWidth,
        pos:[ ]
      }
      let data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
      //console.log(data);
      imgStack.push(data);
      this.drawing = true;
      let pos = {
        x: e.offsetX,
        y: e.offsetY
      };
      ctx.beginPath();
      ctx.moveTo(pos.x, pos.y);
      this.drawing = true;
      this.posArray = [];

      strokeData.pos.push(pos);
      this.$emit("draw-begin", {
        x: pos.x,
        y: pos.y,
        color: this.strokeStyle,
        width:this.lineWidth
      });
    },
    onDraw(e) {
      if (this.drawing) {
        let pos = {
          x: e.offsetX,
          y: e.offsetY
        };
        ctx.lineTo(pos.x, pos.y);
        ctx.stroke();
        strokeData.pos.push(pos);
        this.$emit("on-draw", {
          x: pos.x,
          y: pos.y
        });
      }
    },
    drawEnd(e) {
      this.drawing = false;
      let pos = {
        x: e.offsetX,
        y: e.offsetY
      };
      //strokeData.pos.push(pos);
      this.$emit("draw-end", {
        x: pos.x,
        y: pos.y
      });
      this.$emit("one-draw", strokeData);
      this.canUndo = true;
    },
    undo() {
      this.canUndo = false;
      if (!imgStack.IsEmpty) {
        ctx.putImageData(imgStack.pop(), 0, 0);
        this.canUndo = !imgStack.isEmpty();
      }
    }
  },
  watch: {
    strokeStyle: {
      handler(curVal) {
        if (ctx) {
          ctx.strokeStyle = curVal;
        }
      }
    },
    lineWidth: {
      handler(curVal) {
        if (ctx) {
          ctx.lineWidth = curVal;
        }
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      //this.$refs.drawCanvas.width = document.body.clientWidth;
      //将canvas等比例缩放至手机屏幕宽度
      let xs = document.body.clientWidth / this.$refs.drawCanvas.width;
      this.$refs.drawCanvas.width = document.body.clientWidth;
      this.$refs.drawCanvas.height = this.$refs.drawCanvas.height * xs;
      ctx = this.$refs.drawCanvas.getContext("2d");
      window.ctx=ctx;
      window.drawCanvas=this.$refs.drawCanvas;
      //@touchstart.stop.prevent="onMouseDown" @touchmove.stop.prevent="onDraw" @touchend.stop.prevent="onDrawEnd"
      this.$refs.drawCanvas.addEventListener("mousedown", e => {
        this.drawBegin(e);
      });

      this.$refs.drawCanvas.addEventListener("mouseup", e => {
        this.drawing = false;
        this.drawEnd(e);
      });

      this.$refs.drawCanvas.addEventListener("mousemove", e => {
        this.onDraw(e);
      });

      this.$refs.drawCanvas.addEventListener("touchstart", e => {
        e.preventDefault();
        this.drawBegin({
          offsetX: e.touches[0].clientX,
          offsetY: e.touches[0].clientY
        });
      });

      this.$refs.drawCanvas.addEventListener("touchend", e => {          
        e.preventDefault();     
        this.drawEnd({
          offsetX: 0,
          offsetY: 0
        });
      });

      this.$refs.drawCanvas.addEventListener("touchmove", e => {
        e.preventDefault();
        this.onDraw({
          offsetX: e.touches[0].clientX,
          offsetY: e.touches[0].clientY
        });
      });
    });
  },
  components: {
    ColorPicker,
    WidthPicker
  }
};
</script>

<style scoped>
.draw_board {
  /* border: 1px solid red; */
}

.op {
  position: relative;
  background-color: #f5f1eb;
  padding: 10px 0;
  height: 50px;
  box-sizing: border-box;
}

.op_item{
  width: 25%;
  float: left;
}

.op_item>.item{
  margin: 0 auto;
  width: 30px;
  height: 30px;
  position: relative;
}

.color_control {
  position: relative;
  float: left;
  width: 30px;
  height: 30px;
}

.linewidth_control {
  position: absolute;
  top: 50%;
  margin: 0 auto;
  border-radius: 50%;
}

.btn {
  display: inline-block;
  height: 30px;
  line-height: 30px;
}

.color_picker,
.width_picker {
  position: absolute;
  left: 0;
  bottom: 50px;
  width: 100%;
}
</style>
